import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import './Dt.css';
import axios from 'axios';
// 在window上引入 BMap对象
var BMap = window.BMap;
var map;

export default function Dt() {
  let [list, setList] = useState([])
  const Navigate = useNavigate();
  function getlist() {
    axios.get('http://localhost:3001/getlist').then(res => {
      setList(res.data.data)
    })
  }
  useEffect(() => {

    // 生成百度地图
    map = new BMap.Map('bmap');

    // 定义在保定市内的三个固定点信息（可替换为真实准确的坐标及对应标注）
    let points = [
      {
        longitude: 115.480000,
        latitude: 38.850000,
        label: '锦绣城'
      },
      {
        longitude: 115.490000,
        latitude: 38.860000,
        label: '河北农业大学'
      },
      {
        longitude: 115.500000,
        latitude: 38.840000,
        label: '万达广场'
      },
      {
        longitude: 115.496209,
        latitude: 38.820163,
        label: '保定理工',
      }
    ];
    drawMap(points);
    getlist()
  }, []);

  let drawMap = (points) => {
    // 清除地图上所有覆盖物
    map.clearOverlays();

    points.forEach((point) => {
      // 创建点
      let bmapPoint = new BMap.Point(point.longitude, point.latitude);
      // 聚焦这个点上（这里可以选择只聚焦第一个点或者有其他逻辑，当前示例是遍历添加每个点都会重新聚焦一次，可按需调整）
      map.centerAndZoom(bmapPoint, 14);
      let label = new BMap.Label('<div class="circle">' + point.label + '</div>', {
        offset: new BMap.Size(0, 0),
        position: bmapPoint
      });
      // 设置label样式
      label.setStyle({
        backgroundColor: 'transparent',
        border: "none"
      });

      map.addOverlay(label);
    });

    // 设置鼠标滚轮
    map.enableScrollWheelZoom(true);
  };

  return (
    <div>
      <div id="bmap" style={{ height: '60vh' }}>
      </div>
      <div className='aa' style={{ width: '100vw', height: '40vh' }}>
        {
          list.map((item) => {
            return <div className='bb' key={item.id} onClick={()=>{
                Navigate('/yy')
            }}>
              <div className="cc">
                <img src={item.imgs} alt="" width={'100%'} height={'100%'} />
              </div>
              <div className="dd">
                <span> <h4>{item.title}</h4> </span>
                <span style={{ fontSize: '12px', color: 'gray', float: 'right'}}>十分钟 0.8km</span>
                <p>{item.address}</p>
                <p>{item.phone}</p>
              </div>
            </div>
          })
        }
      </div>
    </div>
  );
}